<template>
    <div>
        <BreadCrumb name1="权限管理" name2="权限列表"></BreadCrumb>
        <el-card class="card">
            <el-table :data="AllRightList" border stripe style="width: 100%;margin:10px 0">
                <el-table-column prop="authName" label="权限说明"></el-table-column>
                <el-table-column prop="path" label="访问路径"></el-table-column>
                <el-table-column prop="level" label="权限层级">
                    <template slot-scope="scoped">
                        <el-tag v-if="scoped.row.level==0" type="success">一级</el-tag> <!-- 当scoped.row.level == 0时渲染 -->
                        <el-tag v-else-if="scoped.row.level==1" type="warning">二级</el-tag> <!-- 当scoped.row.level == 1时渲染 -->
                        <el-tag v-else type="danger">三级</el-tag><!-- 剩下的情况渲染 -->
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';//引入面包屑导航
import {All_RightsList} from '@/api/rights.js';//引入发送请求的接口
    export default {
        data(){
            return{
                AllRightList:[]//存放获取全部权限列表的数据
            }
        },
        components:{
            BreadCrumb//注册面包屑导航
        },
        mounted(){
            this.getAllRightData();//执行获取全部权限列表的方法
        },
        methods:{
            async getAllRightData(){//获取全部权限列表
                const result = await All_RightsList({
                    method:'get',//请求方式
                    url:'rights/list'//请求路径 list表示列表显示 tree表示树状显示
                })
                console.log(result);
                if(result.meta.status != 200){//当状态码不为200 
                    return this.$message({//返回一条失败提示框 并且不执行下面的代码
                        message:'获取数据失败',
                        type:'error'
                    })
                }
                this.AllRightList = result.data;//否则讲获取到的数据赋值给data中的初始值
                console.log(this.AllRightList);
            }
        }
    }
</script>

<style lang="scss" scoped>
.card{
    height:400px;
    overflow-y: scroll;
}
</style>